<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { newsGetDetail } from '@/api/news.js'
import { commentGetAll } from '@/api/comment.js'
import { collectIs, collectAdd, collectDelete } from '@/api/collect.js'
import { useCommentStore } from '@/stores'
import PostComment from '@/views/comment/commponents/PostComment.vue'
import ParentComment from '@/views/comment/commponents/ParentComment.vue'

const route = useRoute()
//详细新闻id
const words = ref(route.params.words)

//新闻详情数据
const newsDetail = ref()
//初始化新闻详情数据
onMounted(async () => {
  const res = await newsGetDetail(words.value)
  newsDetail.value = res.data.data
})

// 收藏
const collectStatus = ref(false)
const newsId = ref({
  newsId: words.value
})
const collect = async () => {
  const res = await collectIs(newsId.value)
  collectStatus.value = res.data.data
}
const collectMyAdd = async () => {
  collectStatus.value = true
  await collectAdd(newsId.value)
  ElMessage.warning('收藏成功')
}
const collectMyDelete = async () => {
  collectStatus.value = false
  await collectDelete(newsId.value)
  ElMessage.warning('取消收藏')
}
onMounted(() => {
  collect()
})

//推荐内容
const RecommendNews = ref([
  {
    id: 1,
    text: '文明的坐标 ｜ 时隔163年 看五兽首首次重聚圆明园博物馆文明的坐标 ｜ 时隔163年 看五兽首首次重聚圆明园博物馆'
  },
  { id: 1, text: '文明的坐标 ｜ 时隔163年 看五兽首首次重聚圆明园博物馆' },
  { id: 1, text: '文明的坐标 ｜ 时隔163年 看五兽首首次重聚圆明园博物馆' },
  { id: 1, text: '文明的坐标 ｜ 时隔163年 看五兽首首次重聚圆明园博物馆' }
])

//评论区
const comments = ref()
const useCommnet = useCommentStore()
const commentGet = async () => {
  const res = await commentGetAll(words.value)
  if (res.data.data) comments.value = res.data.data
}
onMounted(async () => {
  commentGet()
})
//更新评论
watch(
  () => useCommnet.shouldUpdateComments,
  async (newWords) => {
    if (newWords) {
      await commentGet()
      useCommnet.resetUpdateTrigger()
    }
  }
)
</script>

<template>
  <div class="background-container">
    <div class="big-box">
      <el-row :gutter="24" type="flex" justify="center">
        <!-- 正文部分 -->
        <el-col :span="18">
          <div v-if="newsDetail">
            <!-- 导航标签 -->
            <div class="tabs">
              <img src="/src/assets/home.png" style="width: 20px; margin-right: 10px" />
              <a style="font-size: 16px; color: #828181"
                >天下新闻网 → {{ newsDetail.newsType }}
              </a>
            </div>
            <!-- 正文 -->
            <div class="text">
              <h1>{{ newsDetail.title }}</h1>
              <div class="news-collect">
                <div class="news-source">
                  <div style="margin-right: 20px">{{ newsDetail.publishTime }}</div>
                  <div>来源：{{ newsDetail.userId }}</div>
                </div>
                <!-- 收藏 -->
                <div>
                  <el-icon
                    v-if="!collectStatus"
                    @click="collectMyAdd"
                    color="#fdca53"
                    size="30"
                  >
                    <Star />
                  </el-icon>
                  <el-icon v-else @click="collectMyDelete" color="#fdca53" size="35">
                    <StarFilled />
                  </el-icon>
                </div>
              </div>
              <!-- 分割线 -->
              <div class="divider"></div>
              <quill-editor
                class="news-data"
                :content="newsDetail.newsContent"
                content-type="html"
                :options="{ readOnly: true, theme: '', modules: { toolbar: false } }"
                style="
                  border: none;
                  font-size: 20px;
                  text-indent: 40px;
                  padding: 15px 0 50px;
                "
              ></quill-editor>
              <div class="news-source" style="justify-content: flex-end">
                【编辑: {{ newsDetail.userId }} 】
              </div>
            </div>
            <!-- 新闻评论 -->
            <div class="post">
              <div style="display: flex; color: #5a5a5a; justify-content: space-between">
                <h1>发表评论</h1>
                <div style="margin-top: 50px; color: #adadad">
                  文明上网理性发言，请遵守新闻评论服务准则
                </div>
              </div>
              <div class="post-divider"></div>
              <PostComment
                style="margin: 60px 0 100px 0"
                :newsId="words"
                :commentId="0"
              ></PostComment>
            </div>
            <div class="text" style="padding-bottom: 20px">
              <h2 style="color: #5a5a5a">评论区</h2>
              <ParentComment :comments="comments" :newsId="words" />
            </div>
          </div>
          <div v-else>暂无数据</div>
        </el-col>
        <!-- 推荐部分 -->
        <el-col :span="6">
          <!-- 导航标签 -->
          <div class="tabs">
            <ColumnLabels>猜你喜欢</ColumnLabels>
          </div>
          <!-- 推荐内容 -->
          <div v-for="news in RecommendNews" :key="news.id">
            <div class="news-box">
              <img src="/src/assets/login_bg.png" class="news-image" />
              <div class="news-introduction">
                {{ news.text }}
              </div>
            </div>
          </div>
          <el-affix :offset="10">
            <!-- 导航标签 -->
            <div class="tabs" style="margin-top: 60px">
              <ColumnLabels>国际热榜</ColumnLabels>
            </div>
            <!-- 推荐内容 -->
            <div v-for="news in RecommendNews" :key="news.id">
              <div class="news-box">
                <img src="/src/assets/login_bg.png" class="news-image" />
                <div class="news-introduction">
                  {{ news.text }}
                </div>
              </div>
            </div>
          </el-affix>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.background-container {
  background-color: #f4f4f4;
  width: 100vw;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.big-box {
  display: flex;
  flex-direction: column;
  width: 1327px;
}

.tabs {
  margin-bottom: 30px;
  margin-top: 30px;
  text-align: left;
  display: flex;
}

.post {
  text-align: left;
  margin-bottom: 65px;
  background-color: #ffffff00;
}
.text {
  background-color: white;
  border-radius: 15px;
  padding: 25px 65px 200px;
  text-align: left;
  margin-bottom: 100px;
}
.news-source {
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
  color: #828181;
  display: flex;
}

.news-collect {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.divider::before {
  content: '';
  background-color: #c0c0c0;
  height: 0.5px;
  border-radius: 10px;
  display: block;
  margin: 20px auto;
  display: block;
}

.post-divider::before {
  content: '';
  background-color: #cd131c;
  height: 3px;
  border-radius: 50px;
  display: block;
}

.news-box {
  display: flex;
  text-align: left;
  max-height: 105px;
  margin-bottom: 20px;
}

.news-image {
  width: 165px;
  height: 105px;
  border-radius: 6px;
  object-fit: cover; /* 设置图片的填充方式 */
  margin-right: 10px;
  flex-shrink: 0; /* 防止图片被压缩 */
}

/* 限制文本长度 */
.news-introduction {
  text-align: left;
  font-size: 16px;
  line-height: 25px; /* 设置文本上下间隙 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 设置伸缩盒子子元素的排列方式 */
  -webkit-box-orient: vertical;
  /* 显示的行数 */
  -webkit-line-clamp: 4;
}
</style>
